<template>
  <div class="banner">
    <div class="contain">
      <div class="contain-left">
        <img :src="this.img" alt>
        <div class="msg">
          <h3>{{this.user}}</h3>
          <div @click="goAdmin">我的主页</div>
        </div>
      </div>
      <div class="contain-right">
        <span>
          0篇
          <i>文章</i>
        </span>
        <span>
          3次
          <i>阅读</i>
        </span>
        <span>
          0人
          <i>订阅量</i>
        </span>
        <span>
          0元
          <i>收益</i>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Banner",
  data () {
    return {
      user:'',
      img:''
    }
  },
  methods:{
    goAdmin () {
      this.$router.push("/admin");
    }
  },
  mounted(){
    this.user = decodeURI(escape(this.getCookie("userName")));
    this.img = this.getCookie("nm_avatar")
    console.log(this.img,111)
  }
};
</script>

<style lang="scss" scoped>
.banner {
  margin-top:70px;
  width: 100%;
  height: 240px;
  z-index: 1000;
  background-image: url(../../assets/images/banner2.png);
  background-position: 50%;
  background-size: cover;
  .contain {
    width: 60%;
    height: auto;
    margin: 0 auto;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    .contain-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        display: block;
        width: 120px;
        height: 120px;
        border-radius: 100%;
      }
      .msg {
        margin-top: 30px;
        margin-left: 20px;
        h3 {
          font-size: 24px;
          color: #fff;
          margin-bottom: 5px;
          font-weight: 900;
        //   margin-top: 15px;
        }
        div{
            text-align: left;
           background-color: transparent;
            color: #3284f4;
            border: 1px solid #3284f4;
            display: inline-block;
            padding: 0 10px;
            margin-top: 5px;
            font-size: 12px;
            border-radius: 3px;
            opacity: .8;
            line-height: 24px;
            height: 25px; 
            margin-left: -20px;
            cursor: pointer;
        }
      }
    }
    .contain-right{
    color: #fff;
    line-height: 1.8;
        span{
            display: inline-block;
            text-align: center;
            padding-top: 25px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            border:3px solid #aed6ff;
            margin-right: 20px;
            font-size: 16px;
            color: hsla(0,0%,100%,.98);
            font-weight: 700;
            i{
                display: block;
                font-style: normal;
                line-height: 1;
                font-size: 14px;
                
            }
        }
    }
  }
}
</style>

